<template>
  <BasicModal
    v-bind="$attrs"
    :showOkBtn="false"
    :minHeight="20"
    cancelText="关闭"
    width="80%"
    @register="register"
    :title="modalTitle"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <Description @register="registerByDes" class="mt-4" />
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModal } from '/@/components/Modal';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { computed, watch, nextTick } from 'vue';

  const emit = defineEmits(['closeSync']);

  let modalTitle = computed(() => {
    return `详情（IP：${props.info.IPV4})`;
  });

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });

  // watch(
  //   () => props.info,
  //   (newVal) => {
  //     nextTick(() => {
  //       setDescProps({ data: newVal });
  //     });
  //   },
  //   { deep: true },
  // );
  const [register] = useModal();
  const schema: DescItem[] = [
    {
      field: 'SN',
      label: 'SN',
    },
    {
      label: '电脑名称',
      field: 'MachineName',
    },
    {
      label: 'IP',
      field: 'IPV4',
    },
    {
      label: '设备状态',
      field: 'IsRunningCn',
    },
    {
      label: '工程名称',
      field: 'ProjectName',
    },
    {
      label: '工程路径',
      field: 'ProjectFullPath',
    },
    {
      label: 'IOT版本',
      field: 'Version',
    },
    {
      label: '系统版本',
      field: 'OSVersion',
    },
    {
      label: '驱动授权数',
      field: 'NumberOfDriverLicenses',
    },
  ];
  const [registerByDes, { setDescProps }] = useDescription({
    title: '',
    bordered: false,
    data: {},
    schema: schema,
    column: 3,
  });
  function handleVisibleChange(visible) {
    if (!visible) {
      emit('closeSync', {});
      setDescProps({ data: {} });
    } else {
      nextTick(() => {
        setDescProps({ data: props.info });
      });
    }
  }
</script>

<style lang="less" scoped></style>
